<template>
  <div>
    <nav-header></nav-header>
    <nav-bread>
      <li slot="bread"><a href="#">订单确认</a></li>
    </nav-bread>
    <div class="container">
      <div class="row" v-for="(item,index) in payList" v-if="item.checked=='1'">
        <div class="col-md-2">
          <img class="product" :src="'/static/'+item.productImage" alt="">
        </div>
        <div class="col-md-2">
          <span>{{item.productName}}</span>
        </div>
        <div class="col-md-2">
          <span>价格:￥{{item.salePrice}}</span>
        </div>
        <div class="col-md-2">
          <input class="num-input" v-model="item.productNum" type="text">
        </div>
        <div class="col-md-2">
          <span>小计:{{item.productNum * item.salePrice}}</span>
        </div>
      </div>
      <div class="text-right">
        <p>配送费:￥{{shipping}}</p>
        <p>优惠:￥{{dis}}</p>
        <p>税:￥{{tax}}</p>
        <p>￥{{subTotal}}</p>
        <p>￥{{orderTotal}}</p>
      </div>
      <div>
        <router-link to="/address">上一步</router-link>
        <button @click="payment">支付</button>
      </div>
    </div>

    <nav-footer></nav-footer>
  </div>
</template>

<script>
  import NavHeader from '@/components/Header'
  import NavFooter from '@/components/Footer'
  import NavBread from '@/components/Bread'
  import Model from '@/components/Model'
  import axios from 'axios'

  export default {
    name: "OrderConfirm",
    data() {
      return {
        shipping: 100,//配送费
        dis: 200,//优惠
        tax: 400,//税
        orderTotal: 0,
        subTotal: 0,
        payList: [],
      }
    },
    components: {
      NavHeader,
      NavFooter,
      NavBread,
      Model
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        var self = this;
        axios.get('/users/cartList').then(function (res) {
          var res = res.data;
          self.payList = res.result;
          self.payList.forEach(function (item, index) {
            if (item.checked == '1') {
              self.subTotal += item.salePrice * item.productNum
            }
          })
          self.orderTotal = self.subTotal + self.shipping - self.dis - self.tax;
        })
      },
      payment() {
        var self = this;
        var addressId = self.$route.query.addressId;
        axios.post("/users/payMent", {
          addressId: addressId,
          orderTotal: self.orderTotal
        }).then(function (res) {
          var res = res.data;
          if (res.status == '0') {
            self.$router.push({
                path:"/orderSuccess?orderId="+res.result.orderId
              })
          }
        })
      }
    }
  }
</script>

<style scoped>
  .product {
    width: 100%;
    height: 100px;
    display: block;
  }

  .num-input {
    width: 50px;
  }

</style>
